<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-07-30 16:14:24
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\ApplicationList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="data-report">
    <div class="flex justify-between mb-16px">
      <div>
        <span class="font-size-20px font-bold mr-16px">数据报表</span>
        <span>{{ showTime }}</span>
      </div>
      <a-date-picker 
        class="w-200px"
        v-model:value="year"
        picker="year" 
        valueFormat="YYYY"
        @change="onChange"/>
    </div>
    <!-- 分布情况 -->
    <div class="block-div h-263px mb-16px">
      <div class="flex justify-between">
        <div class="font-bold font-size-18px icon-trapezoid">分布情况</div>
        <TabSwitch v-model="distribution" :list="linkList" @change="changeDistribution" />
      </div>
      <div class="echar-div flex justify-between">
        <Pie width="310px" height="190px" :params="regionalProportion"/>
        <Pie width="440px" height="190px" :params="universitiesProportion"/>
        <Pie width="300px" height="190px" :params="genderProportion"/>
      </div>
    </div>
    <!-- 各环节率 -->
    <div class="flex h-388px mb-16px bg-#F5F7FB">
      <div class="w-61% mr-20px theme-bg block-div">
        <div class="flex justify-between mb-18px">
          <div class="font-bold font-size-18px icon-trapezoid">各环节率</div>
          <TabSwitch v-model="link" :list="linkList" @change="changeLink"/>
        </div>
        <BasicTable @register="registerTable" />
      </div>
      <div class="flex-1 theme-bg block-div">
        <div class="flex justify-between">
          <div class="font-bold font-size-18px icon-trapezoid">各环节留存</div>
          <a-button type="link">查看详情<right-outlined /></a-button>
        </div>
        <div class="retain-progress mt-35px">
          <div class="item-bar" 
              v-for="item,index in retainList" 
              :key="item.name">
            <div class="flex-1 flex justify-between mr-10px">
              <div class="flex-1"></div>
              <div class="progress-bar" :style="{'background-color':item.bg,'width': item.percentage+'%'}"></div>
              <div class="flex-1 flex min-w-15px">
                <div class="flex-1 w-1px h-1px mt-15px" :style="{'background-color':item.bg}"></div>
                <div class="h-9px w-9px rounded-50% mt-11px" :style="{'background-color':item.bg}"></div>
              </div>
            </div>
            <div class="text">
              <a-tooltip placement="top">
                <template #title>
                  <span>入职/简历</span>
                </template>
                <QuestionCircleOutlined v-if="index == retainList.length - 1" class="mr-5px align-middle color-#ABBACD"/>
              </a-tooltip>
              <span>{{item.name}}：</span>
              <span>{{item.number}}</span>
              <span v-if="item.percentage !== '100'">（{{item.percentage}}%）</span>份
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 具体数据 -->
    <div class="block-div h-415px mb-16px specific-table">
      <div class="flex justify-between mb-18px">
        <div class="font-bold font-size-18px icon-trapezoid">具体数据</div>
        <TabSwitch v-model="specific" :list="specificList" @change="changeSpecific" />
      </div>
      <BasicTable @register="specificTable" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref , computed, reactive } from 'vue'
import dayjs from 'dayjs';
import TabSwitch from './components/TabSwitch.vue'
import Pie from './components/Pie.vue'
import { BasicTable, useTable } from '@/components/Table'
import { columns , columnsSpecific } from './components/data.ts'


// tab值
const distribution = ref<number>(1) // 分布tab
const link = ref<number>(1) // 环节tab
const specific = ref<number>(1) // 具体数据
const linkList = ['投递简历','过培入职']
const specificList = ['大区','高校类型','性别']

// 改变年份
const curYear = String(dayjs().year()) // 当前年
const year = ref(curYear)
function onChange(val: string){
  year.value = val
}

// 分布情况切换
function changeDistribution(){}

// 展示时间
const showTime = computed(()=>{
  const time = Number(year.value)
  return `${time - 1}.08.01—${time}.07.31`
})

// 数据参数
interface data {
  value: number
  name: string
  percentage: string
  value2: number
  percentage2: string
}

// 参数
interface eacharConfig {
  text: string
  color: string[]
  data: data[]
  orient: string
}

// 大区占比
const regionalProportion = reactive<eacharConfig>({
  text: '各大区占比',
  color: ['#016FFC','#F9804E','#15CD86','#FDB700'],
  orient: 'vertical',
  data: [
    { value: 104, name: '一部', percentage: '140%',value2: 1000, percentage2: '90%'},
    { value: 735, name: '二部', percentage: '30%',value2: 630, percentage2: '30%'  },
    { value: 580, name: '三部', percentage: '20%',value2: 900, percentage2: '50%'  },
    { value: 484, name: '四部', percentage: '10%',value2: 100, percentage2: '70%'  },
  ],
})

// 高校类型占比
const universitiesProportion = reactive<eacharConfig>({
  text: '高校类型占比',
  color: ['#229FE4','#F0A03D','#E85B5B','#1ED0C4','#5CDF7D','#8993D9'],
  orient: 'vertical',
  data: [
    { value: 735, name: 'C9', percentage: '30%',value2: 630, percentage2: '50%'},
    { value: 698, name: 'A类', percentage: '35%',value2: 765, percentage2: '40%'},
    { value: 598, name: 'B类', percentage: '5%',value2: 265, percentage2: '10%'},
    { value: 598, name: 'C类', percentage: '25%',value2: 365, percentage2: '20%'},
    { value: 398, name: '外国语', percentage: '15%',value2: 165, percentage2: '30%'},
    { value: 298, name: '其他', percentage: '45%',value2: 265, percentage2: '40%'},
  ],
})

// 性别占比
const genderProportion = reactive<eacharConfig>({
  text: '性别占比',
  color: ['#209EE4','#E85B5B'],
  orient: 'horizontal',
  data: [
    { value: 735, name: '男性', percentage: '30%',value2: 630, percentage2: '50%'},
    { value: 698, name: '女性', percentage: '35%',value2: 765, percentage2: '40%'},
  ],
})

// 各环节率切换
function changeLink(){}

// 各环节率 表格数据
const tableData = ref([
  {
    key: '1',
    department: '一部',
    face: '66.66%',
    toPei: '77.77%',
    overPei: '88.88%',
    sign: '99.99',
    entry: '33.39',
  },
  {
    key: '2',
    department: '二部',
    face: '6.66%',
    toPei: '7.77%',
    overPei: '8.88%',
    sign: '9.99',
    entry: '3.39',
  },
  {
    key: '3',
    department: '三部',
    face: '66.66%',
    toPei: '77.77%',
    overPei: '88.88%',
    sign: '99.99',
    entry: '33.39',
  },
  {
    key: '4',
    department: '四部',
    face: '26.66%',
    toPei: '37.77%',
    overPei: '48.88%',
    sign: '59.99',
    entry: '73.39',
  },
]);
const [registerTable] = useTable({
  dataSource: tableData,
  //api: getMathList,
  columns,
  formConfig: {
    labelWidth: 120,
    autoAdvancedLine: 4,
  },
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  pagination: false
});

// 各环节留存
const retainList = [
  {
    name: '收到简历',
    bg: '#CCF3FD',
    number: '1000',
    percentage: '100'
  },
  {
    name: '简历环节留存',
    bg: '#ADE3F8',
    number: '800',
    percentage: '80'
  },
  {
    name: '面试环节留存',
    bg: '#88D1F3',
    number: '600',
    percentage: '60'
  },
  {
    name: '培训环节留存',
    bg: '#73C7F0',
    number:'400',
    percentage: '40'
  },
  {
    name: '签约环节留存',
    bg: '#53B7EB',
    number:'200',
    percentage: '20'
  },
  {
    name: '总入职率',
    bg: '#33A7E6',
    number:'100',
    percentage: '10'
  },
]

// 具体数据切换
function changeSpecific(){}

// 具体数据 表格数据
const tableDataSpecific= ref([
  {
    a: '一部',
    b: 1,
    c: 2,
    d: 3,
    e: 4,
    f: 5,
    g: 6,
    h: 7,
    j: 8,
    k: 9,
    l: 10,
    x: 11,
  },
  {
    a: '二部',
    b: 11,
    c: 22,
    d: 33,
    e: 44,
    f: 55,
    g: 66,
    h: 77,
    j: 88,
    k: 98,
    l: 100,
    x: 111,
  },
  {
    a: '三部',
    b: 111,
    c: 221,
    d: 332,
    e: 443,
    f: 525,
    g: 636,
    h: 771,
    j: 883,
    k: 198,
    l: 1020,
    x: 1111,
  },
  {
    a: '四部',
    b: 1111,
    c: 22121,
    d: 33221,
    e: 43143,
    f: 525,
    g: 6361,
    h: 77131,
    j: 883,
    k: 198,
    l: 10220,
    x: 11111,
  },
  {
    a: '总计',
    b: 11111,
    c: 2212311,
    d: 3322321,
    e: 43131243,
    f: 532125,
    g: 636311,
    h: 77321131,
    j: 88313,
    k: 19823,
    l: 1023120,
    x: 11111111,
  },
])
const [specificTable] = useTable({
  dataSource: tableDataSpecific,
  //api: getMathList,
  columns: columnsSpecific,
  formConfig: {
    labelWidth: 120,
    autoAdvancedLine: 4,
  },
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  pagination: false
});

</script>

<style lang="less" scoped>
.data-report{
  
  color:#333;
  .block-div{
    background-color: var(--component-background);
    border-radius: 10px;
    padding: 24px 20px;
  }
  .theme-bg{
    background-color: var(--component-background);
  }
  :deep(.ant-table-thead){
    tr th:first-child div{
      display: none;
    }
  }
  .progress-bar{
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #CCF3FD;
    border-radius: 50px 50px 50px 50px;
    font-size: 14px;
    color: #17506F;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 16px;
    padding: 0 5px;
  }
  .ellipsis{
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
  }
  .item-bar{
    display: flex;
    justify-content: space-between;
    .progress-bar{
      width: 62%;
    }
    .text{
      min-width: 200px;
      line-height: 32px;
      color: #17506F;
    }
  }
  .specific-table :deep(.ant-table-tbody) :last-child td{
    color: #E85B5B;
  }
}
.icon-trapezoid::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 0;
  vertical-align: middle;
  border-bottom: 4px solid #209EE4;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  overflow: hidden;
  transform: rotate(90deg);
  margin-top: -1px;
}
</style>